<script setup lang="ts">

import { markRaw, reactive, ref } from 'vue';
import ToolWrapperModal from './tool-modal/tool-wrapper-modal.vue';
import Img2base64 from './tool-modal/img2base64/img2base64.vue';
import { img2Base64Code } from './tool-modal/img2base64/code.ts';

import JsonFormat from './tool-modal/jsonFormat/jsonFormat.vue';
import { jsonFormatCode } from './tool-modal/jsonFormat/code.ts';

const comp = {
  img2base64: markRaw(Img2base64),
  JSONFormat: markRaw(JsonFormat)
};

const toolWrapperModalRef = ref();
const state = reactive({
  toolList: [
    {
      name: '图片转base64',
      value: 'img2base64',
      code: img2Base64Code,
      codeLanguage: 'ts'
    },
    {
      name: 'JSON格式化',
      value: 'JSONFormat',
      code: jsonFormatCode,
      codeLanguage: 'ts'
    }
  ],
  effectValue: '',
  currentTool: ''
});
const clickBtn = item => {
  state.currentTool = item.value;
  setTimeout(() => {
    toolWrapperModalRef.value.openDialog(item.name);
  }, 100);
};
const changeEffect = value => {
  state.effectValue = value;
};
const clickCancel = () => {
  state.effectValue = '';
};
const getCode = () => {
  let code = '';
  state.toolList.map(item => {
    if (item.value === state.currentTool) {
      code = '```' + item.codeLanguage + '\n' + item.code + '\n```';
    }
  });
  return code;
}
</script>

<template>
  <div class="p2">
    <n-space>
      <n-button v-for="item in state.toolList" :key="item.value" @click="clickBtn(item)">
        {{item.name}}
      </n-button>
    </n-space>
    <ToolWrapperModal ref="toolWrapperModalRef" @click-cancel="clickCancel">
      <template #effect>
        <component :is="comp[state.currentTool]" @change="changeEffect"></component>
      </template>
      <template #code>
        <n-scrollbar style="max-height: 420px;">
          <v-md-preview :text="getCode()"></v-md-preview>
        </n-scrollbar>
      </template>
      <template #result>
        <n-scrollbar style="max-height: 420px;">
          <v-md-preview :text="state.effectValue"></v-md-preview>
        </n-scrollbar>
      </template>
    </ToolWrapperModal>
  </div>
</template>

<style scoped>

</style>
